<?php
/**
 * @link https://ym2.cleverstone.top
 * @copyright Copyright (c) 2020 Yii Manager Software LLC
 */

use builder\uploads\assets\AddAsset;

/** @var \yii\web\View $this */
/** @var array $classifyData 当前文件分类 */

AddAsset::register($this);
?>
<div class="card border-0" ng-controller="ym2.ctrl.upload.add">
    <!--上传选项-->
    <div class="card-body py-0">
        <!--上传分组-->
        <div class="layui-form-item mb-0">
            <label class="layui-form-label box-sizing-content text-left">上传分组</label>
            <div class="layui-input-block d-flex align-items-center">
                <span class="text-primary" ng-init="classify = <?= $classifyData["id"] ?>">
                    <i class="bi bi-folder2 f13"></i>
                    <?= $classifyData['name'] ?>
                </span>
            </div>
        </div>
        <!--上传方式-->
        <div class="layui-form-item mb-0">
            <label class="layui-form-label box-sizing-content text-left">上传方式</label>
            <div class="layui-form">
                <input type="radio" layui-form-render lay-filter="ym2_form_radio" ng-model="uploadWay" value="local" name="uploadWay" title="本地文件">
                <input type="radio" layui-form-render lay-filter="ym2_form_radio" ng-model="uploadWay" value="cloud" name="uploadWay" title="网络文件">
            </div>
        </div>
    </div>
    <!--本地文件上传-->
    <div class="card-body" ng-show="uploadWay == 'local'">
        <div class="card-body pt-0">
            <div class="layui-btn-container clearfix">
                <div class="float-left">
                    <button type="button"
                            ng-show="uploadState.status == 'WAIT_UPLOAD'"
                            class="layui-btn layui-btn-primary layui-btn-gxs"
                            ngf-select="fileSelect($files)"
                            ngf-drop="fileSelect($files)"
                            multiple="multiple">
                        选择文件
                    </button>
                    <button ng-show="uploadState.status != 'WAIT_UPLOAD'" type="button" class="layui-btn layui-btn-primary layui-btn-gxs layui-btn-disabled">选择文件</button>
                    <button ng-click="removeItem()" type="button" class="layui-btn layui-btn-primary layui-btn-gxs {{ !uploadList || !uploadList.length || uploadState.status == 'UPLOADING' ? 'layui-btn-disabled' : '' }}">清空文件</button>
                </div>
                <div class="float-right pt-2">
                    <span class="pr-3">
                        <span class="pr-1">已上传:</span>
                        <span class="text-success" ng-bind="uploadState.successCount"></span>
                        <span class="text-danger" ng-show="uploadState.errorCount">({{ uploadState.errorCount }})</span>
                        <span class="text-muted">/</span>
                        <span class="text-muted" ng-bind="uploadState.totalCount"></span>
                    </span>
                    <span class="pl-3">
                        <span class="pr-1">上传状态:</span>
                        <span ng-show="uploadState.status == 'WAIT_UPLOAD'" class="text-muted">待上传</span>
                        <span ng-show="uploadState.status == 'UPLOADING'">
                            <span class="spinner-grow text-info spinner-grow-sm"></span>
                            <span>上传中...</span>
                        </span>
                        <span ng-show="uploadState.status == 'UPLOADED'" class="text-success">已完成</span>
                    </span>
                </div>
            </div>
            <!--表格头-->
            <table class="layui-table m-0" lay-skin="nob">
                <colgroup>
                    <col width="330px">
                    <col width="140px">
                    <col>
                </colgroup>
                <thead class="bg-light">
                    <tr>
                        <th>文件名</th>
                        <th class="p-0">文件大小</th>
                        <th class="text-center">上传进度</th>
                    </tr>
                </thead>
            </table>
            <!--表格内容-->
            <div class="h-430 overflow-auto">
                <table class="table-static layui-table m-0" lay-skin="nob" ng-show="uploadList && uploadList.length">
                    <colgroup>
                        <col width="330px">
                        <col width="140px">
                        <col>
                    </colgroup>
                    <tbody>
                        <tr ng-repeat="(index, item) in uploadList track by $index">
                            <td class="text-ellipsis" ng-bind="item.name"></td>
                            <td class="p-0">
                                <span ng-show="item._loadedSize">
                                    {{item.loadedShortSize}}
                                    <span>/</span>
                                </span>
                                <span>{{item.size}}</span>
                            </td>
                            <td class="position-relative py-0 d-flex justify-content-center align-items-center">
                                <div class="position-absolute pt-3 d-flex align-items-center" ng-show="item.uploadStatus == 'UPLOADING'">
                                    <svg width="24" height="24">
                                        <circle cx="12" cy="12" r="11" fill="none" stroke="#eee" stroke-width="2"></circle>
                                        <circle stroke-dasharray="{{item.dasharray}},999" cx="12" cy="12" r="11" fill="none" stroke="#28a745" stroke-linecap="round" stroke-width="2"></circle>
                                    </svg>
                                    <span class="pl-2">{{item.processRate}}%</span>
                                </div>
                                <span ng-show="item.uploadStatus != 'UPLOADING'">
                                    <span class="text-muted" ng-show="item.uploadStatus == 'WAIT_UPLOAD'">待上传</span>
                                    <span class="text-success" ng-show="item.uploadStatus == 'UPLOADED'">已完成</span>
                                    <span class="text-danger" ng-show="item.uploadStatus == 'UPLOAD_ERROR'">
                                        <span ym2-tooltip="item.uploadError">上传失败</span>
                                    </span>
                                    <span>/</span>
                                    <a ng-click="removeItem(index)" class="text-decoration-none text-danger" href="javascript:;">移除</a>
                                </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="ym2-nodata" ng-hide="!uploadList || uploadList.length"></div>
            </div>
        </div>
        <div class="layui-btn-container clearfix">
            <div class="float-right">
                <button ng-show="uploadState.status == 'UPLOADED'" ng-click="removeItem()" type="button" class="layui-btn layui-btn-gxs layui-btn-theme">重新上传</button>
                <button ng-show="uploadState.status != 'UPLOADED'" ng-click="uploadFiles()" type="button" class="layui-btn layui-btn-gxs layui-btn-theme {{ !uploadList || !uploadList.length || uploadState.status != 'WAIT_UPLOAD' ? 'layui-btn-disabled' : '' }}">开始上传</button>
            </div>
        </div>
    </div>
    <!--网络文件上传-->
    <div class="card-body" ng-show="uploadWay == 'cloud'">
        <form class="card-body pt-0">
            <div class="form-group">
                <label class="mb-1 label-color ym2-form-label">
                    文件链接
                    <comment class="layui-font-gray pl-1 f12"></comment>
                </label>
                <!--text-->
                <input ng-model="cloudFileLink" type="text" autocomplete="off" placeholder="请填写文件链接" class="ym2-form-control layui-input layui-input-sm">
            </div>
            <div class="layui-btn-container clearfix">
                <div class="float-right">
                    <button class="layui-btn layui-btn-sm layui-btn-theme ym2-form-submit-ui" ng-click="cloudFileSubmit()">确认上传</button>
                </div>
            </div>
        </form>
    </div>
</div>
